<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p v-show="state1==1">
        <span>.</span> 薪资编辑
      </p>
      <p v-show="state1==0">
        <span>.</span> 薪资详情
      </p>
      <div id="nav_go2">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->
    <div class="Pay">
      <!-- 生成工资表 --statrt-->
      <div class="title">
        <p class="bigTitle">2019年11月份工资表（冲焊车间）</p>
        <div class="subheadingAll">
          <div class="Subheading">
            <p class="subheading_Word">本月可分配金额</p>
            <span class="sub_Word one">232423423</span>
            <span class="sub_Word">元</span>
          </div>
          <div class="Subheading">
            <p class="subheading_Word">本月总工资</p>
            <span class="sub_Word number">232423423</span>
            <span class="sub_Word">元</span>
          </div>
          <div class="Subheading">
            <p class="subheading_Word">本月总基本工资</p>
            <span class="sub_Word number">232423423</span>
            <span class="sub_Word">元</span>
          </div>
        </div>
      </div>
      <div id="table_salary">
        <!-- 详情 --start-->
        <template>
          <el-table :data="detailedvalue" style="width: 100%" height="100%" v-show="tableState">
            <el-table-column label="序号" width="200" type="index"></el-table-column>
            <el-table-column prop="name" label="姓名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="岗位工资">
              <template slot-scope="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="工龄津贴">
              <template slot-scope="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="岗位/项目补"></el-table-column>
            <el-table-column prop label="奖金"></el-table-column>
            <el-table-column prop label="加班费"></el-table-column>
            <el-table-column prop label="驻外补助"></el-table-column>
            <el-table-column prop label="补发工资"></el-table-column>
            <el-table-column prop label="餐费补贴"></el-table-column>
            <el-table-column prop label="应发工资"></el-table-column>
            <el-table-column prop label="考勤扣款"></el-table-column>
            <el-table-column prop label="扣款"></el-table-column>
            <el-table-column prop label="合计"></el-table-column>
            <el-table-column prop label="养老金"></el-table-column>
            <el-table-column prop label="失业金"></el-table-column>
            <el-table-column prop label="医疗金"></el-table-column>
            <el-table-column prop label="公积金"></el-table-column>
            <el-table-column prop label="合计"></el-table-column>
            <el-table-column prop label="税前工资"></el-table-column>
            <el-table-column prop label="代缴个税"></el-table-column>
            <el-table-column prop label="个人借贷"></el-table-column>
            <el-table-column prop label="实发工资"></el-table-column>
            <el-table-column prop label="备注"></el-table-column>
          </el-table>
        </template>

        <!-- 概略 --start-->

        <template>
          <el-table :data="tableData" style="width: 100%" height="100%" v-show="tableState1">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="salary" label="岗位工资"></el-table-column>
            <el-table-column prop="funds" label="代缴社会保险费公积金" width="160"></el-table-column>
            <el-table-column prop="bonds" label="奖金"></el-table-column>
            <el-table-column prop="withhold" label="扣款"></el-table-column>
            <el-table-column prop="takemoney" label="实发"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
        </template>
        <p @click="tablexq()" v-show="operation">详情</p>
        <p @click="tablexq1()" v-show="operation1">收起</p>
      </div>

      <!-- 审核按钮 --statrt-->
      <div class="bottom" v-if="state1==1">
        <el-button type="primary" size="medium" @click="pass()">确认</el-button>
        <el-button type="info" size="medium" @click="revert()">返回</el-button>
      </div>
      <!-- 审核按钮 --end-->

      <div class="bottom" v-else>
        <el-button type="info" size="medium" @click="revert()">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [], //概略数据
      detailedvalue: [], //详细数据
      departmentvlue: [],
      state2: "",
      tableState: false, //判断概略
      tableState1: true, //判断详情
      operation: true,
      operation1: false,
      state1: "",
      depart: "",
      yeardate: "",
      year: "",
      month: ""
    };
  },
  created() {
    this.state1 = this.$route.query.state1;
    this.state2 = this.$route.query.state2;
    this.depart = this.$route.query.depart;
    this.yeardate = this.$route.query.yeardate;
    this.getvalue(1);
  },
  methods: {
    //详情数据
    getvalue(e) {
      let arr = { id: e, depart: this.depart, yeardate: this.yeardate };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/PersonnelManagement.asmx/SalaryManlst?index=2&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        if (e == 1) {
          var val = [];
          data3.lstsaldet.forEach(item => {
            val.push(item);
          });
          this.tableData = val;
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].depart = data3.depart;
          }
          for (var i = 0; i < 1; i++) {
            var dd = new Date(parseInt(data3.yeardate.substr(6, 13)));
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = dd.getDate();
            d = d < 10 ? "0" + d : d;
            this.year = y;
            this.month = m;
          }
        } else {
          var val1 = [];
          data3.lstsaldett.forEach(item => {
            val1.push(item);
          });
          this.detailedvalue = val1;
          for (var i = 0; i < this.detailedvalue.length; i++) {
            this.detailedvalue[i].depart = data3.depart;
          }
        }
      });
    },
    //确认按钮
    pass() {},
    //返回
    revert() {
      this.$router.go(-1);
    },
    //详情
    tablexq() {
      this.tableState1 = false;
      this.tableState = true;
      this.operation = false;
      this.operation1 = true;
      this.getvalue(2);
    },
    //概略
    tablexq1() {
      this.tableState1 = true;
      this.tableState = false;
      this.operation = true;
      this.operation1 = false;
    },
    addfn() {
      let arr = {};
      this.tableData.push(arr);
    },
    adddetailedfn() {
      let arr = {};
      this.detailedvalue.push(arr);
    },
    ee() {
      console.log(this.tableData);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.title {
  // height: 40px;
  text-align: center;
}
.Pay {
  width: 98%;
  margin-left: 15px;
  background-color: white;
  border: 1px solid rgb(245, 241, 241);
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go2 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
#table_salary {
  width: 95.1%;
  height: 600px;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
  border: 1px solid $linecolor;
  p {
    width: 30px;
    height: 60px;
    background: $Personnel;
    text-align: center;
    border-radius: 0 5px 5px 0;
    color: $white;
    padding-top: 10px;
    position: absolute;
    cursor: pointer;
    right: -2.2%;
    top: 200px;
  }
}
.bottom {
  text-align: center;
  margin-top: 10px;
}
.bigTitle {
  width: 99%;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  margin-top: 30px;
  /* //   border: 1px solid #000; */
}
.subheadingAll {
  width: 57%;
  margin-top: 15px;
  // border: 1px solid #000;
}
.Subheading {
  width: 30%;
  height: 80px;
  margin-top: 15px;
  margin-left: 20px;
  border: 1px solid $linecolor;
  /* // border: 1px solid #000; */
  display: inline-block;
}
.subheading_Word {
  font-size: 14px;
  font-weight: 700px;
  margin-left: 10px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid $linecolor;
  /* //   border: 1px solid #000; */
}
.sub_Word {
  margin-top: 20px;
}
.number {
  margin-left: 40px;
  font-size: 14px;
  font-weight: bold;
}
.one {
  color: red;
  margin-left: 40px;
  font-size: 14px;
  font-weight: bold;
}
</style>
<style>
#table_salary .el-table thead.is-group th {
  background: #fff;
}
.el-table th > .cell {
  text-align: center;
}
#table_salary .el-table {
  border-left: 0;
  border-right: 0;
}
#table_salary .el-input__inner {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}
#table_salary .el-table td div {
  text-align: center;
}
.el-input__inner {
  text-align: center;
}
</style>